import type { StoreInfo } from "@/Interface/StoreInfoInterface";
import style from "./style.module.scss";
import { useBasicDataStore } from "@/stores/basicDataStore";


const PromotionList: React.FC = () => {

  const basicData = useBasicDataStore(status => status.basicData) as StoreInfo

  // 转换数据结构为数组
  const promotionList = Object.entries(basicData.annualData.promotions).map(([key, value]) => ({
    name: {
      springFestival: '春节',
      laborDay: '劳动节',
      nationalDay: '国庆节',
      summer: '暑期'
    }[key],
    ...value
  }));

  return (
    <div className={style.promotionList}>
      <h4>假期促销数据分析</h4>
      <table className={style.content}>
        <thead>
          <tr>
            <th>促销期</th>
            <th>日均订单量</th>
            <th>日均客流量</th>
            <th>营收增长</th>
            <th>ROI</th>
            <th>新客占比</th>
          </tr>
        </thead>
        <tbody>
          {promotionList.map((promotion, index) => (
            <tr key={index}>
              <td>{promotion.name}</td>
              <td>{promotion.orderCount.toLocaleString()}</td>
              <td>{promotion.customerFlow.toLocaleString()}</td>
              <td style={{ color: '#67C23A' }}>{promotion.revenueGrowth}</td>
              <td>{promotion.roi}</td>
              <td>{promotion.newCustomerRatio}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

export default PromotionList